.markdown
  text-align: justify;
  font-size: $font-size-normal;
  line-height: $line-height-block;
  & > p
    margin: 0 16px 25px;
  h1, h2, h3, h4, h5, h6 
    margin: 20px 16px 15px;
    transition: color 0.3s ease;
    font-weight: bold;
    line-height: 1.5;
    i
      padding-right: 6px;
    .icon-gift::before, .icon-pagelines::before
      transform: translateY(-2px);
    &:hover
      color: $purple-deep;
  h1 + h2,
  h2 + h3,
  h3 + h4,
  h4 + h5,
  h5 + h6
    margin-top: 0;
    padding-top: 0;
  for $i in 1 2 3 4 5 6
    +pc-layout()
      h{$i}
        font-size: $font-size-headings-base - $font-size-headings-step * $i;
    +sp-layout()
      h{$i}
        font-size: $font-size-headings-base - $font-size-headings-step * $i - 4px;
  p
    &:last-child
      margin-bottom: 0;
  pre,
  blockquote
    margin-bottom: 25px;
  ol
    margin: 5px 25px 5px 40px;
    & > li
      list-style-type: decimal;
  ul
    margin: 5px 25px 5px 40px;
    & > li
      list-style-type: disc;
  ol ul, ul ol
    margin-right: 0;
    li
      word-break: break-all;
    p 
      margin-left: 0;
    ol 
      margin-left: 30px;
    ul
      margin-left: 20px;
  
  p,ol,ul
    code
      padding: 2px 4px;
      color: $purple-deep;
      font-size: $font-size-code;
      word-wrap: break-word;
      border-radius: 3px;
      background-color: $bg-dark;

  strong
    font-weight: $font-weight-bold;
  a
    position: relative;
    color: $link-color;
    &::after
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 1.5px;
      background-color: $link-color;
      transform: scaleX(0);
      transform-origin: bottom right;
      transition: transform 0.3s ease-out;
    &:hover
      &::after
        transform-origin: bottom left;
        transform: scaleX(1);
  blockquote
    position: relative;
    padding: 36px 0;
    font-style: italic;
    box-shadow: $block-shadow;
    & > p
      margin: 10px 46px;
    &::before,
    &::after
      position: absolute;
      font-family: Fontello;
      font-style: normal;
      font-weight: $font-weight-normal;
      font-size: $font-size-icon;
      text-decoration: inherit;
    &::before
      content: '\f10d';
      top: 6px;
      left: 16px;
    &::after
      content: '\f10e';
      bottom: 6px;
      right: 16px;
  code
    width: 100%;
    font-family: $font-family-base;
    font-size: $font-weight-normal;
    text-shadow: 0 0 1px $bg-dark-deep;
    text-align: left;
    white-space: pre;
    letter-spacing: 0;
    word-spacing: normal;
    word-break: normal;
    word-wrap: normal;
    line-height: 1.5;
    tab-size: 4;
    hyphens: none;

  pre
    padding: $code-padding;
    max-height: 600px;
    line-height: 1.5;
    box-shadow: #aaa 0px 10px 8px -10px inset, #aaa 0px -10px 8px -10px inset;
    overflow: auto;
    scrollBar();

  & > table
    max-width: 100%;
    overflow-x: auto;
    margin: 0 auto;
    border-radius: 3px;
    border-spacing: 0;
    border-collapse: collapse;
    border: 1px solid #dfdfdf;
    tr
      height: 32px;
    th
      background-color: $bg-dark;
    td, th
      padding: 0 36px;
      border: 1px solid #dfdfdf;
  img
    margin: 0 auto;
    max-width: 100%;
    border-radius: 3px;
    box-shadow: $img-shadow;
    border: 6px solid transparent;
    transition: all 0.3s ease-out;
    &:hover
      border-color: $purple-dark;
  .img-box
    margin-bottom: 25px;
    text-align: center;
    &:last-child
      margin-bottom: 0;
    img[src*='full']
      margin-left: -16px;
      width: calc(100% + 32px);
      max-width: calc(100% + 32px);
      border: none;
      border-radius: unset;
    img[style*='cursor: grab']
      border-color: transparent;
      border-radius: unset;
    span
      display: block;
      padding-top: 8px;
      font-style: italic;